<template>
	<div class="container">
		<el-row>
			<el-col :span="24">
				<yd-form ref="myForm" :options="formOptions" :model="state.queryParams" @change="handlerSelectChange" @formInit="handlerFormInit">
					<template #form-btn>
						<div>
							<el-button class="yd-form-btn" type="primary" @click="initData">查询</el-button>
							<el-button class="yd-form-btn" @click="exportClick">导出</el-button>
						</div>
					</template>
				</yd-form>
			</el-col>
			<el-col :span="24">
				<el-table :data="state.tableData" style="width: 100%">
					<el-table-column prop="cycleTime" label="数据时间" width="180" />
					<el-table-column prop="abilityCode" label="能力名称" width="150" />
					<el-table-column prop="abilityName" label="服务名称" width="150" />
					<el-table-column prop="userOrgName" label="使用方名称" width="150" />
					<el-table-column label="调用量" align="center">
						<!-- PS："调用量"下为动态表头 -->
						<el-table-column v-for="item in state.fieldData.filedReqCountMap" :key="item" :label="item.label">
							<template #default="{ row }">
								<span>{{ row.reqCountMap[item.value] }}</span>
							</template>
						</el-table-column>
					</el-table-column>
					<el-table-column label="调用失败量" align="center">
						<el-table-column label="自身原因" align="center">
							<!-- PS："自身原因"下为动态表头 -->
							<el-table-column v-for="item in state.fieldData.filedReqFailCountMap.filedReqFailSelfReasons" :key="item" :label="item.label">
								<template #default="{ row }">
									<span>{{ row.reqFailCountMap.reqFailSelfReasons[item.value] }}</span>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column label="非自身原因" align="center">
							<!-- PS："非自身原因下"为动态表头 -->
							<el-table-column v-for="item in state.fieldData.filedReqFailCountMap.filedReqFailOtherReasonsMap" :key="item" :label="item.label">
								<template #default="{ row }">
									<span>{{ row.reqFailCountMap.reqFailOtherReasonsMap[item.value] }}</span>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table-column>
				</el-table>
				<div style="float: right">
					<el-pagination
						v-model:current-page="state.queryParams.pageNum"
						v-model:page-size="state.queryParams.pageSize"
						:page-sizes="[10, 20, 30, 50, 100]"
						layout="total, sizes, prev, pager, next, jumper"
						:total="state.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="alarm-query">
import { queryImplementationIndicators, queryOperationalDown, queryOperationalIndicators } from '@/api/middle-monitor/indicator';
import { useDataTable } from '@/hooks';
import { downloadFromBlob } from '@/utils/common';
import { ElMessage } from 'element-plus';
import { onActivated, onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

// const { dataList, pageConfig, initData, loadData } = useDataTable();
interface Params {
	pageNum: number;
	pageSize: number;
	serviceCode?: string;
	serviceName?: string;
	abilityCode?: string;
	abilityName?: string;
}
interface State {
	tableData: any[];
	queryParams: Params;
	total: number;
	fieldData: any;
}
const route = useRoute();
const state = reactive<State>({
	tableData: [
		// {
		// 	cycleTime: '20230615',
		// 	abilityCode: 'A100600049',
		// 	abilityName: '线上极速营销能力',
		// 	serviceCode: 'S10061400014',
		// 	serviceName: '营销活动快速发布',
		// 	orgCode: '006',
		// 	orgName: '信息技术中心',
		// 	userOrgCode: '991',
		// 	userOrgName: '新疆公司',
		// 	appCode: null,
		// 	appName: null,
		// 	departmentCode: null,
		// 	departmentName: null,
		// 	orderCode: null,
		// 	suborderCode: null,
		// 	reqCountMap: {
		// 		xtywl_A1: 57,
		// 		yhsyl_A2: 1,
		// 		zhktl_A3: 2,
		// 		xtywl_A4: 57,
		// 	},
		// 	reqFailCountMap: {
		// 		reqFailSelfReasons: {
		// 			xtywl_B1: 1,
		// 			yhsyl_B2: 2,
		// 			zhktl_B3: 3,
		// 			xtywl_B4: 4,
		// 		},
		// 		reqFailOtherReasonsMap: {
		// 			xtywl_C1: 5,
		// 			yhsyl_C2: 6,
		// 			zhktl_C3: 7,
		// 			xtywl_C4: 8,
		// 		},
		// 	},
		// },
	],
	fieldData: {
		// cycleTime: '数据时间',
		// abilityName: '能力名称',
		// serviceName: '服务名称',
		// userOrgName: '使用方名称',
		// filedReqCountMap: [
		// 	{ value: 'xtywl_A1', label: '系统业务量（主）' },
		// 	{ value: 'yhsyl_A2', label: '系统业务量（副）' },
		// 	{ value: 'zhktl_A3', label: '系统业务量（副）' },
		// 	{ value: 'xtywl_A4', label: '系统业务量（副）' },
		// ],
		// filedReqFailCountMap: {
		// 	filedReqFailSelfReasons: [
		// 		{ value: 'xtywl_B1', label: '系统业务量（主）' },
		// 		{ value: 'xtywl_B1', label: '系统业务量（副）' },
		// 		{ value: 'zhktl_B3', label: '系统业务量（副）' },
		// 		{ value: 'xtywl_B4', label: '系统业务量（副）' },
		// 	],
		// 	filedReqFailOtherReasonsMap: [
		// 		{ value: 'xtywl_C1', label: '系统业务量（主）' },
		// 		{ value: 'yhsyl_C2', label: '系统业务量（副）' },
		// 		{ value: 'zhktl_C3', label: '系统业务量（副）' },
		// 		{ value: 'xtywl_C4', label: '系统业务量（副）' },
		// 	],
		// },
	},
	total: 0,
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		...route.query,
	},
});

const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '能力名称',
		prop: 'abilityName',
		selectKey: 'id',
		attrs: {
			clearable: true,
		},
		api: { name: 'queryMpAbilityOptions', params: {} },
		cascaders: [
			{
				cascadersParams: 'serviceName',
				api: {
					name: 'queryIndicatorServiceOptions',
				},
			},
		],
	},
	{
		type: 'select',
		label: '服务名称',
		prop: 'serviceName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '使用方名称',
		prop: 'userOrgName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '订单号',
		prop: 'orderCode',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '子订单号',
		prop: 'subOrderCode',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		dateType: 'datetimerange',
		enableCrossDay: true,
		defaulShortcutsKey: 'lastDay',
		span: 10,
	},
]);

/**
 * 下拉框change
 */
function handlerSelectChange(options: BaseOptionType, value: any) {
	if (options.type === 'select' && options.label === '能力名称') {
		let res = options.children?.filter((item: any) => item.id === value);
		if (res && res.length > 0) {
			let val: number | any = res[0].value;
			state.queryParams.abilityCode = val;
		}
	}
}

// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		for (let key in query) {
			if (Array.isArray(formData[key])) {
				formData[key] = [];
				if (query[key]) {
					formData[key].push(query[key]);
				}
			} else {
				formData[key] = query[key];
			}
		}
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
}
async function handlerFormInit(form: any, val: any) {
	let res = val[0].children?.filter((item: any) => item.id === state.queryParams.abilityName);
	if (res && res.length > 0) {
		state.queryParams.abilityCode = res[0].value;
	}
	state.queryParams.serviceCode = state.queryParams.serviceName;
	initData();
}
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`);
	state.queryParams.pageSize = val;
	initData();
};
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`);
	state.queryParams.pageNum = val;
	initData();
};

function initData() {
	state.queryParams.pageNum = 1;
	state.queryParams.serviceCode = state.queryParams.serviceName;

	queryOperationalIndicators(state.queryParams).then((res: any) => {
		if (res.code !== 0) {
			ElMessage.error(res.msg);
			state.fieldData = {};
			state.tableData = [];
			state.total = 0;
			return;
		}
		state.fieldData = res.data.fieldMap;
		state.tableData = res.data.pageDataInfo.data;
		state.total = res.data.pageDataInfo.total;
	});
}
/**
 * 导出
 */
function exportClick() {
	queryOperationalDown(state.queryParams).then((res: ApiResponse) => {
		downloadFromBlob(res, '用户信息模板').then((o) => {
			console.log(o, 'ooooo');

			if (!o.flag) {
				ElMessage.warning(o.msg);
			}
		});
	});
}

onActivated(() => {});
</script>

<style scoped lang="scss">
:deep .el-table__header,
:deep .el-scrollbar__view,
:deep .el-table__body {
	width: 100% !important;
}
</style>
